<script>
import { mapStores } from "pinia";
import { useBaseStore } from "../stores/useBaseStore.js";
import { login } from "../api/index.js";
export default {
  data() {
    return {
      params:{
        username: "",
        password: "",
        // 1 管理员 2 教师 3 学生
        usertype: 3
      }
    }
  },
  computed:{
    ...mapStores(useBaseStore)
  },
  methods: {
    gotoHome(){
      this.$router.push({
        name:"home"
      })
    },
    async dologin(){
      let data = await login(this.params);
      console.log("请求成功后，服务器提供有效数据:",data);
      // 将结果存在中央仓库中，方便后续的维护和管理，方便项目中的文件或组件获取
      // this.baseStore.token = data.token;
      // this.baseStore.user = data.user;
      // 调用仓库的 actions 方法 即完成仓库的数据存储，又完成浏览器本地的存储
      this.baseStore.setLoginData(data.token,data.user)
      this.gotoHome();
    }
  },
}

</script>

<template>
  <div class="login-box">
    <el-card class="login">
      <template #header>
        <div class="title">课程管理系统</div>
      </template>

      <el-form>
        <!-- <el-form-item class="item" label-position="top" label="用户名">
            <el-input type="text" size="large" placeholder="学号/工号/账号"></el-input>
        </el-form-item>
        <el-form-item class="item" label-position="top" label="密码">
            <el-input type="password" size="large" placeholder="密码"></el-input>
        </el-form-item> -->

        <el-form-item class="item">
            <el-input type="text" size="large" placeholder="学号/工号/账号" v-model="params.username">
                <template #prefix> <EpUser/> </template>
            </el-input>
        </el-form-item>
        <el-form-item class="item">
            <el-input type="password" size="large" placeholder="密码" v-model="params.password">
                <template #prefix> <EpLock /> </template>
            </el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group class="btn-group" size="large" v-model="params.usertype">
            <el-radio-button label="学生" :value="3"/>
            <el-radio-button label="教师" :value="2"/>
            <el-radio-button label="管理员" :value="1"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button class="btn" type="primary" size="large" @click="dologin()">登录</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<style scoped>
.login-box {
  background-image: url('../assets/img/login-background.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title{
    text-align: center;
}
.login{
    transform: translateY(-100px);
    width: 350px;
}
.item{
  margin-bottom: 24px;
}
.item>:deep(.el-form-item__label){
    display: inline-block;
    width: 60px;
    text-align: justify;
    text-align-last: justify;
}
.btn-group{
  width: 100%;
}
.el-radio-button{
  flex-grow: 1;
}
:deep(.el-radio-button__inner){
  width: 100%;
}
.btn{
    width: 100%;
}
</style>
